<template>
	<view class="applyHy_box" :data-theme="theme" :class="theme" :style="globalColor.style">
		<view class="" v-if="isSign">
			<HeadCustom :title="title" :isSpace="isApp ? true : false"></HeadCustom>
			<view class="apply_box fboxCol">
				<view class="img_box"><image :src="themeBanner" mode="aspectFill"></image></view>
				<view class="apply_content">
					<view class="apply_view">
						<view class="form_box">
							<view class="font32 bm_box">请填写报名信息</view>
							<u--form labelPosition="left" :labelWidth="80">
								<view v-for="(item, index) in formData" :key="index">
									<view class="line" v-if="index != 0"></view>
									<u-form-item :label="item.name" :prop="item.id">
										<u--input
											:type="item.attribute"
											v-if="item.type == 'fill'"
											:maxlength="item.length"
											:placeholder="`请输入${item.name}`"
											v-model="applyData[item.name]"
											border="none"
										></u--input>
										<view class="select_box font28 font-ell1" v-else @tap="openSheet(item)">
											<text v-if="applyData[item.name]">
												{{applyData[item.name]}}
											</text>
											<text v-else style="color: #98979C;">
												{{'请选择'+item.name}}
											</text>
										
										</view>
										<text v-if="item.type != 'fill'" class="bwfont bw-arrow-right img_right font24 color-ACB4C7"></text>
									</u-form-item>
								</view>
							</u--form>
						</view>
						<p class="tips_txt font24">注：请您认真核对报名信息，提交后不可修改，谢谢！</p>
					</view>
				</view>
			</view>
			<u-popup :show="mutilShow" @close="mutilClose" round="20">
				<view class="mutilBox">
					<view class="mutilBtn fboxRow Ycenter Xbetween">
						<text class="t1" @tap="mutilShow = false">取消</text>
						<text class="t2" @tap="selectData">确定</text>
					</view>
					<view class="" style="max-height: 600rpx;overflow: auto;">
						<view class="mutilItem fboxRow Ycenter font30 Xbetween" v-for="(item, index) in dataList" :key="index">
							<text>{{ item.name }}</text>
							<view @tap="selectItem(item, index)" class="flex1" style="height: 30rpx;"></view>
							<image
								@tap="selectItem(item, index)"
								v-if="item.isClick"
								class="selectImg"
								src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs1.png"
								mode="aspectFill"
							></image>
							<image
								@tap="selectItem(item, index)"
								v-else
								class="selectImg"
								src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/selectFs2.png"
								mode="aspectFill"
							></image>
						</view>
					</view>
				</view>
			</u-popup>
			<template v-if="detail.conferenceId">
				<BottomBtn class="showBtn" :title="btnTitle" @btnClick="goNextPage"></BottomBtn>
			</template>
		</view>

		<Submit v-else :conferenceId="conferenceId" title="报名成功" content="期待您的到来，我们竭诚为您服务。"></Submit>
		<not-login bottom="160rpx" ref="notLogin" />
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { conferenceApply, conferenceGetByConferenceId } from '@/api/h5.js';
import { debounce } from '@/static/js/common.js';
import Submit from './personal/submit.vue';
export default {
	components: { BottomBtn, Submit },
	data() {
		return {
			isShowBtn: true,
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			show: false,
			mutilShow: false,
			isSign: true,
			dataList: [],
			formData: [],
			applyData: {},
			dataIndex: '',
			conferenceId: '',
			themeBanner: '',
			detail: {},
			sum: 0,
			isApp: 0,
			attribute: '',
			title: '',
			btnTitle: '确认提交'
		};
	},
	onLoad(option) {
		this.conferenceId = option.conferenceId;
		this.themeBanner = decodeURIComponent(option.themeBanner);
		const { bw_link } = getApp().getBWData(['bw_link']);
		if (bw_link.isApp) {
			this.isApp = bw_link.isApp;
			this.title = '立即报名';
		} else {
			uni.setNavigationBarTitle({
				title: `立即报名`
			});
		}
		this.conferenceGetUser();
	},
	methods: {
		// 获取报名数据
		conferenceGetUser() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			conferenceGetByConferenceId({ conferenceId: this.conferenceId })
				.then(res => {
					if (res.data) {
						this.detail = res.data;
						this.formData = JSON.parse(res.data.applyFields);
						this.applyData = JSON.parse(res.data.memberFields);
						if(res.data.applySignMode == 2){
							this.btnTitle = '报名即签到'
						}
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 关闭多选弹框
		mutilClose() {
			this.mutilShow = false;
		},
		// 确定选中数据
		selectData() {
			const arr = this.dataList.filter(x => x.isClick);
			if (arr.length != 0) {
				this.applyData[this.dataIndex] = arr.map(x => x.name).join(',');
			} else {
				this.applyData[this.dataIndex] = '';
			}
			this.mutilShow = false;
		},
		// 多选时，选择数据
		selectItem(item, index) {
			if (this.attribute == 'single') {
				this.dataList.forEach(_item => {
					if (_item.name == item.name) {
						_item.isClick = true;
					} else {
						_item.isClick = false;
					}
				});

				this.selectData();
			} else {
				this.dataList[index].isClick = !this.dataList[index].isClick;
			}
		},
		openSheet(data) {
			this.attribute = data.attribute;
			this.dataIndex = data.name;
			this.dataList = [];
			data.options.forEach(item => {
				const obj = {
					name: item,
					isClick: false
				};
				this.dataList.push(obj);
			});
			if (this.applyData[this.dataIndex]) {
				const arr = this.applyData[this.dataIndex].split(',');
				this.dataList.forEach(x => {
					arr.forEach(y => {
						if (x.name == y) {
							x.isClick = true;
						}
					});
				});
			}
			this.mutilShow = true;
		},
		// 确认提交
		goNextPage: debounce(function() {
			let flag = false;
			this.formData.find(item => {
				if ((item.required == 'true' || item.required) && !this.applyData[item.name]) {
					uni.showToast({
						title: `${item.name}必填`,
						icon: 'none'
					});
					flag = true;
					return flag
				}
			});
			if (flag) {
				return;
			}
			const obj = {
				conferenceId: this.conferenceId,
				information: JSON.stringify(this.applyData)
			};
			conferenceApply({ ...obj })
				.then(res => {
					if (res.data) {
						if(this.detail.applySignMode == 2){
							this.$pageTo('/bwSign/conferenceSign?conferenceId=' + this.detail.conferenceId + '&themeName=' + this.detail.themeName,'redirectTo');
							
						}else{
							this.isSign = false;
						}
					}
				})
				.catch(err => {
					if (err.code == 401006) {
						this.$refs.notLogin.openLogin({
							show: true,
							position: 'center'
						});
					}
				});
		},1000)
	}
};
</script>

<style lang="scss" scoped>
@media (min-aspect-ratio: 13/20) {
	.showBtn {
		display: none;
	}
}
// 横屏
@media screen and (orientation: landscape) {
	.showBtn {
		display: block;
	}
}
::v-deep .u-form-item__body__right__content__slot {
	flex-direction: row;
}
::v-deep .uni-input-input{
	color: var(--contentFontDarkColor);
}
::v-deep .uni-input-placeholder{
	color: var(--contentFontFourColor) !important;
}
::v-deep .u-form-item__body__left__content__label {
	color: var(--titleFontColor) !important;
	font-size: 28rpx !important;
	text-align: justify;
	> span {
		width: 100%;
		height: 28rpx;
		margin-right: 20rpx;
		&::after {
			content: '';
			width: 100%;
			display: inline-block;
		}
	}
}
::v-deep .u-form-item__body {
	height: 108rpx;
}
.line {
	border-bottom: 1rpx solid var(--backgroundDivisionColor);
}
.applyHy_box {
	min-height: 100vh;
}
.mutilBox {
	padding: 30rpx;

	overflow: auto;
	.mutilBtn {
		margin-bottom: 40rpx;
		.t1 {
			font-size: 32rpx;
			font-weight: 500;
			line-height: 45rpx;
			color: var(--titleFontColor);
		}
		.t2 {
			font-size: 32rpx;
			font-weight: 500;
			color: var(--contourButtonTextColor);
			padding: 10rpx 20rpx;
			background: var(--pureButtonBackOneColor);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
	.mutilItem {
		height: 100rpx;
		border-bottom: 1rpx solid var(--backgroundDivisionColor);
		color: var(--contentFontDarkColor);
		.selectImg {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}
	}
}
.select_box {
	width: 100%;
	height: 30rpx;
	// padding: 20rpx 0;
	color: var(--contentFontDarkColor);
}
.img_right {
	width: 24rpx;
	margin-right: 20rpx;
}
.apply_box {
	marging-bottom: 40rpx;
	.img_box {
		height: 480rpx;
		> image {
			width: 100%;
			height: 100%;
		}
	}
	.apply_content {
		box-shadow: 0 -20rpx 30rpx 16rpx var(--controllerBgColor);
		z-index: 1;
		padding: 40rpx;
		position: relative;
		.apply_view {
			position: absolute;
			top: -70rpx;
			left: 40rpx;
			right: 40rpx;
			padding-bottom: 120rpx;
		}
		.tips_txt {
			font-weight: 400;
			color: var(--contentFontFourColor);
			margin-top: 20rpx;
			text-align: center;
		}
		.form_box {
			padding: 60rpx 0 0 30rpx;
			background-color: var(--viewBgColor);
			border-radius: 16rpx;
			.bm_box {
				font-weight: 600;
				color: var(--titleFontColor);
			}
		}
	}
}
</style>
